<script setup>
import {ref} from "vue";

/**
 * 基本数据类型
 */
let a = ref(0)
const b = ref("yujun")

/**
 * setup中修改需要加上.value
 */
function f1() {
  a.value = 10
}
a = ref(10) // 失去响应式，不要写这样的代码
/**
 * ref也可以定义对象类型的响应式数据,此时，ref定义的对象的.value是一个Proxy()
 */
const games = ref([{id: 1, name: "王者荣耀"}, {id: 2, name: "原神"}, {id: 3, name: "英雄联盟"}])

function f2() {
  games.value[0].name = "穿越火线"
}

/**
 * 整体改,依然是响应式
 */
games.value = [{id: 4, name: "王者荣耀"}, {id: 5, name: "原神"}, {id: 6, name: "英雄联盟"}]
</script>

<template>
  模板中不需要写.value
  <h1>模板中直接写变量名字 {{ a }}</h1>
  <div v-for="game in games" v-bind:key="game.id">{{ game.name }}</div>
</template>

<style scoped>

</style>